<template>
  <div class="login" ref="login">
    <transition name="login-form">
      <component :is="currentTab.curName" @on-click="tab"></component>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import {reactive, markRaw} from "vue";
import LoginForm from "@/components/login/loginForm.vue";
import UsePhoneLogin from "@/components/login/usePhoneLogin.vue";
import UseQrCodeLogin from "@/components/login/useQrCodeLogin.vue";
import registe from "@/components/login/registe.vue";
import {getCurrentInstance} from "vue";

// const currentInstance = getCurrentInstance()
// window.onmousemove = (e) => {
//   let x = e.clientX-900,
//       y = e.clientY-700;
//   currentInstance.ctx.$refs.login.style.backgroundPositionX = x + 'px';
//   currentInstance.ctx.$refs.login.style.backgroundPositionY = y + 'px';
// }

type Tabs = {
  name: String
  curName: any
  Com: String
}
type Com = Pick<Tabs, 'curName'>
const tabData = reactive<Tabs[]>([{
  name: 'LoginForm',
  curName: markRaw(LoginForm),
  Com: 'LoginForm'
}, {
  name: 'UsePhoneLogin',
  curName: markRaw(UsePhoneLogin),
  Com: 'UsePhoneLogin'
}, {
  name: 'UseQrCodeLogin',
  curName: markRaw(UseQrCodeLogin),
  Com: 'UseQrCodeLogin'
}, {
  name: 'registe',
  curName: markRaw(registe),
  Com: 'registe'
}])
let currentTab = reactive<Com>({
  curName: tabData[0].curName
})

const tab = (val) => {
  currentTab.curName = tabData[val].curName
}
</script>

<style lang="scss" scoped>

.login {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/loginbg.png") round;

  &-form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    padding: 25px 25px 50px 25px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    -webkit-box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
    border-radius: 13px;
    -webkit-border-radius: 13px;
  }

  .login-form-enter, .login-form-leave-to {
    opacity: 0;
  }

  .login-form-enter-to, .login-form-leave {
    opacity: 1;
  }

  .login-form-enter-active, .login-form-leave-active {
    position: absolute;
    transition: all 1s;
  }

}
</style>
